<template>
  <div class="draw-map">
    <div class="map">
      <div ref="map" id="map"></div>
    </div>
    <ul class="desc">
      <li><h4>准备工作：边界确定和中心点,是否划分街道，确定弹框数据，经纬度(边界)，矢量图</h4></li>
      <li>1、注意script文件在引入的时候最好放在head内</li>
      <li>2、一般地图都带有交互和打点，最好是将关于地图交互的内容单独用js文件只写vue组件内script里面的部分，最后通过mixins: [js文件]混入到局部地图初始化组件</li>
      <li>3、js文件内拿到实例化的map对象，需要在地图初始化的vue组件的初始化函数里在map实例化对象初始化之后直接this调用js文件内获取map对象的方法，避免未拿到做终止函数处理</li>
      <li>4、添加中国地图省份等数据覆盖物群组时GeoJSON类里面geoJSON应该是json文件内的对象数据，非json数据（字符串）</li>
      <li>5、点击打点位置显示自定义弹框，AMap.InfoWindow弹框类里的offset默认是以弹框的下中部覆盖在打点位置处，所以坐标轴的圆心在此处，右和下移动为正，上和左移动为负，弹框实例.open(地图实例, 打点的坐标)</li>
      <li>6、在自定义创建打点图标时使用的AMap.Icon类中icon应该是通过模块已经加载好的图标</li>
      <li>7、图标图片通过require导入和url路径直接写入的大小有差别，url不能用require导入</li>
    </ul>
    <detail-window v-if="visible" @close="close" :detailData="detailData"></detail-window>
  </div>
</template>

<script>
import AMap from 'AMap'
import DetailWindow from './components/detailWindow'
import universityJson from './json/university'
import China from './json/China'
import configMap from './configMap'

export default {
  name: 'DrawMap',
  mixins: [configMap],
  data () {
    return {
      // AMap: AMap,
      map: null,
      universityJson,
      China,
      geoJson: null,
      visible: false,
      detailData: {}
    }
  },
  components: {
    DetailWindow
  },
  created () {
  },
  mounted () {
    this.initMap()
  },
  methods: {
    openInfoTip (params) {
      this.detailData = params
      this.visible = true
    },
    close () {
      this.visible = !this.visible
    },
    initMap () {
      this.map = new AMap.Map('map', {
        resizeEnable: true,
        zoom: 12, // 缩放比例，值越大越清晰范围越小
        center: [114.304569, 30.593354],
        showLable: false,
        mapStyle: 'amap://styles/e2be7af84557b3db943c47fe6fffce1e'
      })
      window.map = this.map
      this.addJson()
    }
  },
  beforeDestroy () {
    this.map.destroy()
  }
}
</script>

<style lang="scss" scoped>
.draw-map{
  position: relative;
  height: 8rem;
  display: flex;
  .map{
    flex: 2;
    height: 8rem;
    display: flex;
    #map{
      width: 90%;
      height: 8rem;
      border: 1px solid black;
    }
  }
  .desc{
    flex: 1;
    margin: 0 auto;
    >li{
      margin-top: .2rem;
    }
  }
}
::v-deep {
  .amap-logo{
    display: none!important;
  }
  .amap-copyright{
    display: none!important;
  }
  .name{
    padding: 0rem .12rem;
    color: white;
    background: #337EF4;
  }
}
</style>
